<template>
    <div>
      <IndexHeader @tojump="toLogin"></IndexHeader>
        <!-- 粘性布局 -->
        <div class="nav">
            <van-tabs v-model="active" title-active-color="pink" color="pink" sticky animated swipeable>
                <van-tab :title="category.name" v-for="category in categoryList" :key="category.id">
                    <!-- 使用 list 组件将文章列表包裹起来
                    每当 list 被拉到第, 就会触发一个事件 load  -->
                    <!-- v-model 声明了这个列表是否正在加载中
                    如果为 false 那么拉到底就会发出下一页的请求
                    自动变为 true 然后等待,不会重复发送 -->
                    <!-- finished 属性标注当前列表是否已经到底, 默认是 false
                    如果是 true , 那么就显示借宿文字, 再也不会发送下一页请求了 -->
                    <!-- 这个组件每当拉倒第就会触发 load 事件, 可以监听他, 发送下一页请求 -->
                    <van-list
                    v-model="category.loading"
                    :finished="category.finished"
                    finished-text="没有更多了"
                    :immediate-check="false"
                    @load="loadMore"
                    >
                    <NewsItem :postData="item" v-for="item in category.postList" :key="item.id"></NewsItem>
                    </van-list>
                </van-tab>
            </van-tabs>
            <!--  -->
            <i class="iconfont iconjiantou1" @click="$router.push('/channel')"></i>
            <!--  -->
        </div>
    </div>
</template>

<script>
import IndexHeader from '@/components/IndexHeader'
import NewsItem from '@/components/NewsItem'
export default {
    data(){
        return{
            active: 0,
            categoryList:[]
        }
    },
    components:{
        IndexHeader,
        NewsItem
    },
    watch:{
        active(){
            // 如果这个栏目之前没有获取过文章列表，那么此时就去获取一次
            if(this.categoryList[this.active].postList.length == 0){
                this.getPost();
            } 
        }
    },
    methods:{
        getCategory(){
            let newData = [];
            // 判断localStorage中是否有数据，有的话就从中取
            if(localStorage['channelNameList']){
                 newData = JSON.parse(localStorage.getItem('channelNameList'));
            }else{
                this.$axios({
                    url:'/category',
                    methods:'get'
               }).then(res => {
                   newData = res.data.data
               })
            }
            newData = newData.map(category => {
                // 将原返回数据中对象与其他数据封装成一个对象返回
                return{
                    ...category,
                    postList:[],
                    pageIndex:1,
                    pageSize:5,
                    // 是否正在加载
                    loading:false,
                    // 是否已经全部加载完毕
                    finished:false
                } 
            });
            this.categoryList = newData;
            if(this.categoryList.length > 0){
                // 打开页面时获取热点文章数据
                this.getPost();
            }
        },
        getPost(){
            const currentCategoryList = this.categoryList[this.active];
            this.$axios({
                url:'/post',
                method:'get',
                params:{
                    category: currentCategoryList.id,
                    pageIndex: currentCategoryList.pageIndex,
                    pageSize: currentCategoryList.pageSize
                }
            }).then(res=>{
                // 获取文章后, 不应该放入公共 data 中的 postList
                // 而是放入当前激活栏目 的 postList
                // 以前我们获取文章列表之后, 直接将之前的数组替换掉
                // 其实我们需要的是, 下一页的内容跟上一页拼接起来
                // 展开，合并
                this.categoryList[this.active].postList = [...currentCategoryList.postList,...res.data.data];
                // 这里加载完了文章列表数据, 然后需要手动将当前栏目的加载状态改回 false 也就是没有正在加载
                // 这样子才能在下次拉到底的时候重新触发加载下一页
                currentCategoryList.loading = false;
                // 如果这一页数据的数量少于页容量，则加载结束，数据已全部加载完
                if(res.data.data.length < currentCategoryList.pageSize){
                    currentCategoryList.finished = true;
                }
            })
        },
        loadMore(){
            // 读取更多文章, 实际上
            // 就是将当前栏目的 pageIndex 加一
            // 发送文章获取请求即可
            console.log('加载下一页');
            this.categoryList[this.active].pageIndex +=1;
            this.getPost();
        },
        toLogin(){
            if(localStorage.getItem('token')){
                this.$router.push({name:'personalCenter'});
            }else{
                this.$router.push('/login');
            }
        }
    },
    mounted(){
        this.getCategory();
    }
}
</script>

<style lang="less" scoped>
// deep css 深度选择器, 可以穿透 scoped 范围限制
// /deep/ .van-tab__text {
//   color: #333;
// }
.nav{
    position: relative;
    .iconfont{
        position: absolute;
        top:0;
        right:0;
        width: 44px;
        height:44px;
        text-align: center;
        line-height: 44px;
        background-color: #fff;
        color: #333;
        font-size: 16px;
        font-weight: 700;
        transform:rotate(90deg);
    }
}
</style>